<template>
	<view class="page_wrap">
		<custom-header title="花材推荐" sticky />
		<!-- 查询条件区域 -->
		<view class="query-section">
			<view class="query-row">
				<!-- 搜索大框：包含地区和输入框 -->
				<view class="search-box">
					<view class="area-selector" @click="showAreaPicker">
						<text class="area-text">{{ selectedArea }}</text>
						<text class="area-arrow">▼</text>
					</view>
					<view class="divider"></view>
					<image class="search-icon" src="/static/home/cxtb.png" mode="aspectFit" />
					<input class="search-input" placeholder="供应商ID/商品名称" />
				</view>
				<!-- 时间选择器 -->
				<view class="time-selector" @click="showTimePicker">
					<text class="time-text">{{ selectedDate }}</text>
					<text class="time-arrow">▼</text>
				</view>
			</view>
		</view>

		<!-- Tab切换 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: activeTab === 'all' }" @click="switchTab('all')">
				<image v-if="activeTab === 'all'" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
				<text class="tab-text">全部({{ tabCounts.all }})</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'pending' }" @click="switchTab('pending')">
				<image v-if="activeTab === 'pending'" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
				<text class="tab-text">待审核({{ tabCounts.pending }})</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'approved' }" @click="switchTab('approved')">
				<image v-if="activeTab === 'approved'" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
				<text class="tab-text">已通过({{ tabCounts.approved }})</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'rejected' }" @click="switchTab('rejected')">
				<image v-if="activeTab === 'rejected'" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
				<text class="tab-text">已驳回({{ tabCounts.rejected }})</text>
			</view>
		</view>

		<!-- 表格区域 -->
		<view class="table-section">
			<!-- 表头 -->
			<view class="table-header">
				<text class="header-cell flower-col">花材</text>
				<text class="header-cell reviewer-col">申核人</text>
				<text class="header-cell supplier-col">供应商</text>
				<text class="header-cell status-col">状态</text>
			</view>

			<!-- 数据行 -->
			<view class="table-body">
				<view class="table-row" v-for="(item, index) in currentData" :key="index" @click="goToDetail(item)">
					<view class="table-cell flower-cell">
						<text class="flower-name">{{ item.flowerBaseName }}</text>
						<text class="grade">{{ item.grade }}</text>
					</view>
					<text class="table-cell reviewer-cell">{{ item.reviewer }}</text>
					<view class="table-cell supplier-cell">
						<view class="sc_wrap">
							<view class="supplier-name">{{ item.supplierName }}</view>
							<view class="supplier-location">{{ item.location }}</view>
						</view>
					</view>
					<view class="table-cell status-cell">
						<view class="pending" v-if="item.status == 'pending'">
							待审核 <up-icon name="arrow-right" size="22rpx" color="#FFA44A"></up-icon>
						</view>
						<view class="approved" v-if="item.status == 'approved'">
							已通过 <up-icon name="arrow-right" size="22rpx" color="#30C8AE"></up-icon>
						</view>
						<view class="rejected" v-if="item.status == 'rejected'">
							已驳回 <up-icon name="arrow-right" size="22rpx" color="#F5564D"></up-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		
		
		<view class="footer_btn_wrap fixed">
			<view class="btn_wrap">
				<button
					size="default" 
					type="default" 
					class="btn"
					@click="goToScanRecommend">
						扫码推荐
					</button>
			</view>
		</view>
		<!-- 时间选择器组件 -->
		<custom-select-time :show="showTimeSelector" :defaultDate="selectedDate" @confirm="handleTimeConfirm"
			@close="showTimeSelector = false" />
		<!-- 区域选择器组件 -->
		<custom-select :show="showAreaSelector" :datas="areaList" @confirm="handleAreaConfirm"
			@close="showAreaSelector = false" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted
	} from 'vue'
	
	// 页面参数
	const pageParams = reactive({
		type: 'all', // all, pending, approved, rejected
	})

	// 当前激活的Tab
	const activeTab = ref('all')

	// 时间选择器相关
	const showTimeSelector = ref(false)
	const selectedDate = ref('2025-06-16')

	// Tab统计数据
	const tabCounts = reactive({
		all: 2222,
		pending: 2,
		approved: 22,
		rejected: 2
	})

	// 区域选择器相关
	const showAreaSelector = ref(false)
	const selectedArea = ref('斗南片区')
	const areaList = ref(['斗南片区', '晋宁片区', '呈贡片区'])

	// 模拟数据
	const qualityCheckData = reactive({
		all: [{
				flowerBaseName: '蜜桃雪山（香槟）',
				grade: 'A级',
				reviewer: '宁满欣',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'approved'
			},
			{
				flowerBaseName: '粉红雪山',
				grade: 'B级',
				reviewer: '宁满欣',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'approved'
			},
			{
				flowerBaseName: '粉红雪山',
				grade: 'C级',
				reviewer: '宁郭琼',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'pending'
			},
			{
				flowerBaseName: '蜜桃雪山（香槟）',
				grade: 'D级',
				reviewer: '宁满欣',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'approved'
			},
			{
				flowerBaseName: '微光',
				grade: 'B级',
				reviewer: '宁园',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'approved'
			},
			{
				flowerBaseName: '白雪山',
				grade: 'D级',
				reviewer: '宁满欣',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'rejected'
			},
			{
				flowerBaseName: '艾莎',
				grade: 'E级',
				reviewer: '宁满琼',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'approved'
			},
			{
				flowerBaseName: '艾莎',
				grade: 'D级',
				reviewer: '宁满欣',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'approved'
			},
			{
				flowerBaseName: '粉红雪山',
				grade: 'D级',
				reviewer: '张小明',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'approved'
			},
			{
				flowerBaseName: '高原红',
				grade: 'C级',
				reviewer: '宁满欣',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'rejected'
			},
			{
				flowerBaseName: '卡布奇诺',
				grade: 'D级',
				reviewer: '宁园',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'approved'
			}
		],
		pending: [{
			flowerBaseName: '粉红雪山',
			grade: 'C级',
			reviewer: '宁郭琼',
			supplierName: '柯莘花卉',
			location: '仓前基地',
			status: 'pending'
		}],
		approved: [{
				flowerBaseName: '蜜桃雪山（香槟）',
				grade: 'A级',
				reviewer: '宁满欣',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'approved'
			},
			{
				flowerBaseName: '粉红雪山',
				grade: 'B级',
				reviewer: '宁满欣',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'approved'
			}
		],
		rejected: [{
				flowerBaseName: '白雪山',
				grade: 'D级',
				reviewer: '宁满欣',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'rejected'
			},
			{
				flowerBaseName: '高原红',
				grade: 'C级',
				reviewer: '宁满欣',
				supplierName: '柯莘花卉',
				location: '仓前基地',
				status: 'rejected'
			}
		]
	})

	// 当前显示的数据
	const currentData = computed(() => {
		return qualityCheckData[activeTab.value] || []
	})

	// 显示区域选择器
	const showAreaPicker = () => {
		showAreaSelector.value = true
	}

	// 处理区域确认
	const handleAreaConfirm = (area) => {
		selectedArea.value = area
	}

	// 显示时间选择器
	const showTimePicker = () => {
		showTimeSelector.value = true
	}

	// 处理时间确认
	const handleTimeConfirm = (date) => {
		selectedDate.value = date
		console.log('时间选择:', date)
	}


	// 切换Tab
	const switchTab = (tab) => {
		activeTab.value = tab
	}

	// 跳转到扫码推荐页面
	const goToScanRecommend = () => {
		
		uni.navigateTo({
			url: `/pages/scanRecommend/scanRecommend`,
		})
		
		return
		// 调用扫码API
		uni.scanCode({
			onlyFromCamera: true, // 只允许从相机扫码
			scanType: ['qrCode', 'barCode'], // 扫码类型
			success: (res) => {
				console.log('扫码成功：', res)
				try {
					// 假设扫码结果是JSON字符串，包含花材信息
					const scanInfo = JSON.parse(res.result)
					// 跳转到推荐页面并传递参数
					uni.navigateTo({
						url: `/pages/scanRecommend/scanRecommend?scanInfo=${encodeURIComponent(JSON.stringify(scanInfo))}`,
						success: () => {
							console.log('跳转成功')
						},
						fail: (error) => {
							console.error('跳转失败：', error)
							uni.showToast({
								title: '跳转失败',
								icon: 'none'
							})
						}
					})
				} catch (error) {
					console.error('解析扫码结果失败：', error)
					uni.showToast({
						title: '无效的二维码',
						icon: 'none'
					})
				}
			},
			fail: (error) => {
				console.error('扫码失败：', error)
				if (error.errMsg.includes('cancel')) {
					// 用户取消扫码
					return
				}
				uni.showToast({
					title: '扫码失败',
					icon: 'none'
				})
			}
		})
	}

	// 跳转到详情页面
	const goToDetail = (item) => {
		uni.navigateTo({
			url: `/pages/recommendDetail/recommendDetail`
		})
	}

	onMounted(() => {
		// 获取页面参数
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options

		pageParams.type = options.type || 'all'

		// 设置初始Tab
		activeTab.value = pageParams.type
	})
</script>

<style lang="scss">
	.page_wrap {
		min-height: 100vh;
		background: #FFFFFF;
		padding-bottom: 140rpx; // 为底部固定按钮留出空间

		// 查询条件区域
		.query-section {
			margin: 0 24rpx;
			border-radius: 20rpx;
			height: 114rpx;
			line-height: 114rpx;

			.query-row {
				display: flex;
				align-items: center;
				gap: 20rpx;
			}

			.search-box {
				flex: 1;
				display: flex;
				align-items: center;
				background: #f5f5f5;
				border-radius: 32rpx;
				padding: 0 30rpx;
				height: 64rpx;
				min-width: 0;

				.area-selector {
					display: flex;
					align-items: center;
					gap: 8rpx;
					flex-shrink: 0;
					cursor: pointer;

					.area-text {
						font-size: 24rpx;
						color: #555;
					}

					.area-arrow {
						font-size: 20rpx;
						color: #555;
					}
				}

				.divider {
					width: 1px;
					height: 32rpx;
					background: #e5e5e5;
					margin: 0 18rpx;
				}

				.search-icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 12rpx;
					display: block;
					transform: translateY(-1rpx);
				}

				.search-input {
					flex: 1;
					font-size: 24rpx;
					color: #555;
					background: transparent;
					border: none;
					outline: none;
					min-width: 0;

					&::placeholder {
						color: #999999;
					}
				}
			}

			.time-selector {
				display: flex;
				align-items: center;
				gap: 8rpx;
				flex-shrink: 0;
				margin-left: 20rpx;
				cursor: pointer;

				.time-text {
					font-size: 24rpx;
					color: #555;
				}

				.time-arrow {
					font-size: 20rpx;
					color: #555;
				}
			}
		}

		// Tab栏
		.tab-bar {
			background: #ffffff;
			display: flex;
			.tab-item {
				flex: 1;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.tab-icon {
					width: 27.5rpx;
					height: 25rpx;
					transform: translateX(10rpx) translateY(-16rpx);
				}

				.tab-text {
					font-size: 28rpx;
					color: #999;
				}

				.tab-indicator {
					position: absolute;
					bottom: 0;
					width: 60rpx;
					height: 4rpx;
					background: #f5564d;
					border-radius: 2rpx;
				}

				&.active .tab-text {
					color: #333;
					font-weight: 600;
				}
			}
		}

		// 表格区域
		.table-section {
			margin: 10rpx 24rpx 0;
			.table-header {
				padding: 0 24rpx;
				display: flex;
				background: #F5F7F9;
				height: 67rpx;
				align-items: center;
				border-radius: 12rpx;

				.header-cell {
					font-size: 24rpx;
					color: #333333;
					font-weight: 600;

					&.flower-col {
						flex: 2.5;
					}

					&.reviewer-col {
						flex: 1.2;
					}

					&.supplier-col {
						flex: 1.5;
					}

					&.status-col {
						flex: 1;
					}
				}
			}

			.table-body {
				border: 1px solid #F2F2F2;
				border-radius: 12rpx;
				padding: 0 24rpx;
				margin-top: 12rpx;
				.table-row {
					display: flex;
					align-items: center;
					height: 100rpx;
					border-bottom: 1rpx solid #F2F2F2;
					// cursor: pointer;
					position: relative;

					&:last-child {
						border-bottom: none;
					}
					&:active {
						background-color: #f1f1f1;
					}

					.table-cell {
						font-size: 24rpx;
						color: #666666;
						// padding: 20rpx 12rpx;
						height: 100%;
						display: flex;
						align-items: center;
						&.flower-cell {
							flex: 2.5;
							justify-content: flex-start;
							gap: 8rpx;
							white-space: nowrap;
							overflow: hidden;

							.flower-name {
								color: #666666;
								//  flex: 1;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								min-width: 0;
							}

							.grade{
								color: #F5564D;
								font-size: 24rpx;
								flex-shrink: 0;
								min-width: 50rpx;
							}
						}

						&.reviewer-cell {
							flex: 1.2;
						}

						&.supplier-cell {
							flex: 1.5;
							gap: 4rpx;
							.supplier-name {
								color: #666666;
								font-size: 24rpx;
							}

							.supplier-location {
								color: #999999;
								font-size: 22rpx;
							}
						}

						&.status-cell {
							flex: 1;

							.pending {
								color: #FFA44A;
								display: flex;
							}

							.approved {
								color: #30C8AE;
								display: flex;
							}

							.rejected {
								color: #F5564D;
								display: flex;
							}
						}
					}
				}
			}
		}
	}
</style>